<#include "/able/_inc/_head.html"/>
<#include "/able/_inc/_layout.html"/>

<!DOCTYPE HTML>
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="${lang}">

<head>
    <@head />
    <link rel="stylesheet" href="/assets/css/wx-article.css" rel="stylesheet">
</head>
<body>
<@layout>
<div class="wrap-content" id="container">
<!-- start: PAGE TITLE -->
<section id="page-title">
    <div class="row">
        <div class="col-sm-8">
            <label>公众号管理 - 文本信息</label>
        </div>

    </div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: BASIC TABLE -->
<div class="container-fluid container-fullw bg-white">
    <div class="row">
        <div class="col-md-12">
            <!--<div class="alert alert-info">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <div><i class="fa fa-question-circle"></i>操作提示</div>
                <ul>
                    <li>展示网站所有的广告位置。</li>
                    <li>点击查看可查看广告位置相关广告位的广告。</li>
                    <li>可搜索关键词进行查询，侧边栏可进行高级搜索。</li>
                </ul>
            </div>-->

        <#--<div class="panel panel-white">
            <div class="panel-body">
                <form id="query_form" class="form-inline">
                    <div class="form-group">
                        <label class="control-label">标题：</label>
                        <input class="form-control" type="text" name="title" id="title">
                    </div>

                    <button id="btn_query" class="btn btn-primary" type="button">
                        查询
                    </button>
                </form>
            </div>

        </div>-->

            <div id="toolbar">
                <a id="btn-add" href="${ctx_admin}/wx-article/addview" class="btn btn-o btn-danger">添加</a>
                <!--<button id="btn-update" type="button" class="btn btn-primary">修改</button>
                <button id="btn-updatepwd" type="button" class="btn btn-primary">修改密码</button>
                <button id="btn-scene" type="button" class="btn btn-primary">设置监控点</button>-->
            </div>
        <#--<table id="data-table" class="table table-hover col-xs-12" data-toolbar="#toolbar"></table>-->
            <div id="data-article" class="row margin-top-20" >
                <#--<div class="col-sm-6 col-lg-3">
                    <div class="template template-item">
                        <div class="content">
                            <div class="content-item content-default active" data-index="1">
                                <img src="/assets/images/default.png" alt="" >
                                <p>请输入标题</p>
                            </div>
                            <div class="content-item active" data-index="2">
                                <img src="/assets/images/default.png" alt="">
                                <p style="">请输入标题</p>
                                <button type="button" class="btn-delete btn btn-danger">删除</button>
                            </div>
                        </div>
                        <div class="toolbar">
                            <span><a href="javascript;"> <i class="fa fa-users"></i> 群发</a></span>
                            <span><a href="javascript;"> <i class="fa fa-pencil-square-o"></i> 编辑</a></span>
                            <span><a href="javascript;"> <i class="fa fa-trash-o"></i> 删除</a></span>
                        </div>
                    </div>
                </div>-->


            </div>
            <div class="row">
                <div class="text-center">
                    <ul id="pagination" class="pagination-sm"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
</@layout>
    <script type="text/javascript" src="/vendor/twbs-pagination/jquery.twbsPagination.js"></script>
    <script type="text/javascript">

        var $table = null;
        $(function () {
            initTable();
            $('#btn_query').click(function () {
                $table.bootstrapTable('destroy');
                initTable();
            });


        });

        function initTable(currentPage) {
            var params={};
            params.showCount = 10;
            params.currentPage = currentPage;
            $.ajax({
                data: params,
                type: 'post',
                dataType: 'json',
                url: global.adminPath + '/wx-article/datapage',
                success: function (res) {

                    var rows =res.rows;

                    for (var i = 0; i < rows.length; i++) {
                        var data = rows[i];
                        var html = '<div class="col-sm-6 col-lg-3 margin-bottom-20">\n' +
                                '<div class="template template-item">\n' +
                                '<div class="content">\n';
                        var messages = data.messages;
                        if (messages && messages.length > 0) {
                            for (var k = 0; k < messages.length; k++) {
                                var message = messages[k];
                                if (k == 0) {
                                    html += '<div class="content-item content-default active" data-index="1">\n' +
                                            '<img src="' + message.thumbMedia + '" alt="' + message.title + '" onerror="this.src=\'/assets/images/default.png\'" >\n' +
                                            '<p>' + message.title + '</p>\n' +
                                            '</div>\n';
                                } else {
                                    html += '<div class="content-item active" data-index="2">\n' +
                                            '<img src="' + message.thumbMedia + '" alt="' + message.title + '" onerror="this.src=\'/assets/images/default.png\'" >\n' +
                                            '<p>' + message.title + '</p>\n' +
                                            '<button type="button" class="btn-delete btn btn-danger">删除</button>\n' +
                                            '</div>\n';
                                }
                            }

                        }else {
                            html += '<div class="content-item content-default active" data-index="1">\n' +
                                    '<img src="' + data.thumbMedia + '" alt="' + data.title + '" onerror="this.src=\'/assets/images/default.png\'" >\n' +
                                    '<p>' + data.title + '</p>\n' +
                                    '</div>\n';
                        }

                        html += '</div>\n' +
                                '<div class="toolbar">'+
                                '<span><a href="/admin/wx-group?messageId='+data.id+'"><i class="fa fa-users"></i> 群发</a></span>'+
                                '<span><a href="javascript;"><i class="fa fa-pencil-square-o"></i> 编辑</a></span>'+
                                '<span><a href="javascript;"><i class="fa fa-trash-o"></i> 删除</a></span>'+
                                '</div>'+
                                '</div>';
                        $('#data-article').append(html);
                    }

                    $('#pagination').twbsPagination({
                        totalPages : res.totalPage,
                        visiblePages: 5,
                        first:'首页',
                        last:'尾页',
                        prev:'上一页',
                        next:'下一页',
                        //页面点击时触发事件
                        onPageClick : function(event, page) {
                            // 将当前页数重置为page
                            // pagenow = page
                            //调用后台获取数据函数加载点击的页码数据
                            // loaddata();
                            debugger
                            initTable(page);
                        }
                    });

                }
            });
        }

        var tgridObj = {
            del: function (id) {
                layer.confirm('确定要删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.ajax({
                        data: {},
                        type: 'post',
                        dataType: 'json',
                        url: global.adminPath + '/wx-message/delete/' + id,
                        success: function (res) {
                            if (res.success) {
                                layer.msg(res.message, {
                                    icon: 1,
                                    time: 2000, ///2秒关闭（如果不配置，默认是3秒）
                                }, function () {
                                    $table.bootstrapTable('destroy');
                                    initTable();
                                });
                            } else {
                                layer.msg(res.message, {icon: 2});
                            }
                        }
                    });
                }, function () {
//                取消
                });
            }
        };


    </script>
